<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>${fn:escapeXml(article.title) } - Article detail</title>
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js"></script>
    <style type="text/css">
.footer {
  padding-right: 15px;
  padding-left: 15px;
}
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}
    </style>
  </head>
  <body>
  
<jsp:include page="navigationHead.jsp" />

    <div class="container">
    
      <h1>${fn:escapeXml(article.title) }</h1>
    
      <article>
      ${article.content }
      </article>
    
      <div>
        <button class="btn btn-lg btn-danger" id="buttonDelete">Delete</button>
        <a class="btn btn-lg btn-info" href="../modify/${article.id }">Modify</a>
      </div>
    
      <footer class="footer">
        <p>&copy; 2016&nbsp;<a href="mailto:jy@stu.cpu.edu.cn">Zannicaro</a></p>
      </footer>
    </div>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
    <script>
    $(document).ready(function() {
    	$("#buttonDelete").click(function() {
    		if (!confirm("Are you sure?")) return;
        	var postData = { id : "${article.id }"};
        	$.ajax({
        		"type" : "POST",
        		"url" : "<%=request.getContextPath() %>/article/delete",
        		"contentType" : "application/json",
        		"data" : JSON.stringify(postData),
        		"dataType" : "json",
        		"success" : function(data) {
        			if (data.code == 0) {
        				location.href = "<%=request.getContextPath() %>/article/list";
        			} else {
        				alert("Error:" + data.msg);
        			}
        		},
        		"error" : function() {
        			alert("error!");
        		},
        		"complete" : function() {
        		}
        	});
    	});
    });
    </script>
  </body>
</html>